<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短视频链接提取工具</title>
    <style>
        :root {
            --primary-color: #ff4e50;
            --secondary-color: #fc913a;
            --dark-color: #333;
            --light-color: #f5f5f5;
            --success-color: #4caf50;
            --info-color: #2196f3;
            --warning-color: #ff9800;
            --danger-color: #f44336;
        }
        
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: var(--light-color);
            color: var(--dark-color);
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
        
        h1 {
            text-align: center;
            color: var(--primary-color);
            margin-bottom: 30px;
            font-weight: 600;
        }
        
        .input-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: var(--dark-color);
        }
        
        input[type="text"] {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }
        
        input[type="text"]:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 78, 80, 0.2);
        }
        
        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 16px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        button:hover {
            background-color: #e04648;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 78, 80, 0.3);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        button i {
            margin-right: 8px;
        }
        
        .result {
            margin-top: 30px;
            padding: 20px;
            border-radius: 8px;
            background-color: #f9f9f9;
            display: none;
            border: 1px solid #eee;
        }
        
        .result h2 {
            margin-top: 0;
            color: var(--primary-color);
            font-size: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .result-item {
            margin-bottom: 15px;
        }
        
        .result-label {
            font-weight: bold;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
        }
        
        .result-value {
            display: flex;
            background-color: white;
            padding: 10px 15px;
            border-radius: 6px;
            border: 1px solid #eee;
        }
        
        .result-value input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: 14px;
            padding: 0;
        }
        
        .copy-btn {
            background-color: var(--info-color);
            padding: 6px 12px;
            font-size: 12px;
            margin-left: 10px;
            border-radius: 4px;
        }
        
        .copy-btn:hover {
            background-color: #0d8aee;
            transform: none;
            box-shadow: none;
        }
        
        .preview-container {
            margin-top: 20px;
        }
        
        .cover-preview {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin-top: 10px;
            display: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .video-preview {
            width: 100%;
            aspect-ratio: 16/9;
            border-radius: 8px;
            margin-top: 20px;
            display: none;
        }
        
        .error {
            color: var(--danger-color);
            margin-top: 10px;
            padding: 10px;
            background-color: rgba(244, 67, 54, 0.1);
            border-radius: 6px;
            display: none;
        }
        
        .success {
            color: var(--success-color);
            margin-top: 10px;
            padding: 10px;
            background-color: rgba(76, 175, 80, 0.1);
            border-radius: 6px;
            display: none;
        }
        
        .supported-sites {
            margin-top: 30px;
            font-size: 14px;
            color: #666;
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 8px;
        }
        
        .site-badge {
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            margin-right: 6px;
            margin-bottom: 6px;
            font-size: 12px;
        }
        
        .loading {
            display: none;
            text-align: center;
            margin: 20px 0;
        }
        
        .spinner {
            width: 24px;
            height: 24px;
            border: 3px solid rgba(255, 78, 80, 0.3);
            border-radius: 50%;
            border-top-color: var(--primary-color);
            animation: spin 1s ease-in-out infinite;
            display: inline-block;
            vertical-align: middle;
            margin-right: 8px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .platform-icon {
            width: 20px;
            height: 20px;
            margin-right: 8px;
            vertical-align: middle;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <h1><i class="fas fa-video"></i> 短视频链接提取工具</h1>
        
        <div class="input-group">
            <label for="url-input">输入短视频链接：</label>
            <input type="text" id="url-input" placeholder="例如: https://v.douyin.com/xxxxx 或 https://www.bilibili.com/video/BVxxxx">
        </div>
        
        <button id="extract-btn"><i class="fas fa-link"></i> 提取视频信息</button>
        <button id="clear-btn" style="background-color: #666; margin-left: 10px;"><i class="fas fa-trash-alt"></i> 清空</button>
        
        <div id="loading" class="loading">
            <div class="spinner"></div>
            <span>正在解析链接，请稍候...</span>
        </div>
        
        <div id="error-message" class="error"></div>
        <div id="success-message" class="success"></div>
        
        <div id="result" class="result">
            <h2><i class="fas fa-info-circle"></i> 提取结果</h2>
            
            <div class="result-item">
                <div class="result-label">
                    <i class="fas fa-link"></i> 视频地址：
                </div>
                <div class="result-value">
                    <input type="text" id="video-url" readonly>
                    <button class="copy-btn" data-target="video-url"><i class="fas fa-copy"></i> 复制</button>
                </div>
            </div>
            
            <div class="result-item">
                <div class="result-label">
                    <i class="fas fa-image"></i> 封面地址：
                </div>
                <div class="result-value">
                    <input type="text" id="cover-url" readonly>
                    <button class="copy-btn" data-target="cover-url"><i class="fas fa-copy"></i> 复制</button>
                </div>
                <img id="cover-preview" class="cover-preview" alt="封面预览">
            </div>
            
            <div class="result-item">
                <div class="result-label">
                    <i class="fas fa-code"></i> 嵌入代码：
                </div>
                <div class="result-value">
                    <input type="text" id="embed-code" readonly>
                    <button class="copy-btn" data-target="embed-code"><i class="fas fa-copy"></i> 复制</button>
                </div>
            </div>
            
            <div class="preview-container">
                <iframe id="video-preview" class="video-preview" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
        
        <div class="supported-sites">
            <p><strong>支持的平台：</strong></p>
            <div>
                <span class="site-badge"><i class="fab fa-tiktok"></i> 抖音</span>
                <span class="site-badge"><i class="fas fa-film"></i> 快手</span>
                <span class="site-badge"><i class="fas fa-tv"></i> B站</span>
                <span class="site-badge"><i class="fas fa-watermelon"></i> 西瓜视频</span>
                <span class="site-badge"><i class="fab fa-youtube"></i> YouTube</span>
                <span class="site-badge"><i class="fab fa-vimeo"></i> Vimeo</span>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const urlInput = document.getElementById('url-input');
            const extractBtn = document.getElementById('extract-btn');
            const clearBtn = document.getElementById('clear-btn');
            const resultDiv = document.getElementById('result');
            const videoUrlInput = document.getElementById('video-url');
            const coverUrlInput = document.getElementById('cover-url');
            const embedCodeInput = document.getElementById('embed-code');
            const coverPreview = document.getElementById('cover-preview');
            const videoPreview = document.getElementById('video-preview');
            const errorMessage = document.getElementById('error-message');
            const successMessage = document.getElementById('success-message');
            const loadingDiv = document.getElementById('loading');
            
            // 为所有复制按钮添加事件监听
            document.querySelectorAll('.copy-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const targetId = this.getAttribute('data-target');
                    const targetInput = document.getElementById(targetId);
                    targetInput.select();
                    document.execCommand('copy');
                    
                    showSuccess(`已复制到剪贴板: ${targetInput.value.substring(0, 50)}${targetInput.value.length > 50 ? '...' : ''}`);
                });
            });
            
            extractBtn.addEventListener('click', extractVideoInfo);
            clearBtn.addEventListener('click', clearAll);
            urlInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    extractVideoInfo();
                }
            });
            
            function clearAll() {
                urlInput.value = '';
                videoUrlInput.value = '';
                coverUrlInput.value = '';
                embedCodeInput.value = '';
                coverPreview.src = '';
                coverPreview.style.display = 'none';
                videoPreview.src = '';
                videoPreview.style.display = 'none';
                resultDiv.style.display = 'none';
                errorMessage.style.display = 'none';
                successMessage.style.display = 'none';
            }
            
            function extractVideoInfo() {
                const url = urlInput.value.trim();
                hideMessages();
                
                if (!url) {
                    showError('请输入视频链接');
                    return;
                }
                
                showLoading();
                
                // 模拟异步请求，实际应用中可能需要调用后端API
                setTimeout(() => {
                    try {
                        const videoInfo = parseVideoUrl(url);
                        
                        if (videoInfo) {
                            videoUrlInput.value = videoInfo.url || '不支持直接获取';
                            coverUrlInput.value = videoInfo.coverUrl || '不支持直接获取';
                            embedCodeInput.value = videoInfo.embedCode || '不支持嵌入';
                            
                            // 显示封面预览
                            if (videoInfo.coverUrl) {
                                coverPreview.src = videoInfo.coverUrl;
                                coverPreview.style.display = 'block';
                            } else {
                                coverPreview.style.display = 'none';
                            }
                            
                            // 显示视频预览
                            if (videoInfo.embedUrl) {
                                videoPreview.src = videoInfo.embedUrl;
                                videoPreview.style.display = 'block';
                            } else {
                                videoPreview.style.display = 'none';
                            }
                            
                            resultDiv.style.display = 'block';
                            hideLoading();
                        } else {
                            hideLoading();
                            showError('无法识别该链接中的视频，请尝试其他链接');
                            resultDiv.style.display = 'none';
                        }
                    } catch (e) {
                        hideLoading();
                        showError('处理链接时出错: ' + e.message);
                        resultDiv.style.display = 'none';
                    }
                }, 800);
            }
            
            function parseVideoUrl(url) {
                // 抖音
                if (url.includes('douyin.com') || url.includes('iesdouyin.com')) {
                    // 抖音短链接需要解析，这里简化处理
                    const videoIdMatch = url.match(/video\/(\d+)/) || url.match(/\/share\/video\/(\d+)/);
                    if (videoIdMatch && videoIdMatch[1]) {
                        const videoId = videoIdMatch[1];
                        return {
                            url: `https://www.iesdouyin.com/share/video/${videoId}/`,
                            coverUrl: `https://p3-sign.douyinpic.com/tos-cn-p-0015/${videoId}~noop.image`,
                            embedCode: `<iframe src="https://www.iesdouyin.com/share/video/${videoId}/" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>`,
                            embedUrl: `https://www.iesdouyin.com/share/video/${videoId}/`
                        };
                    }
                    return {
                        url: url,
                        coverUrl: null,
                        embedCode: null,
                        embedUrl: null
                    };
                }
                
                // 快手
                if (url.includes('kuaishou.com') || url.includes('gifshow.com')) {
                    // 快手链接解析简化处理
                    return {
                        url: url,
                        coverUrl: null, // 快手封面需要特殊处理
                        embedCode: `<iframe src="${url}" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>`,
                        embedUrl: url
                    };
                }
                
                // B站
                if (url.includes('bilibili.com') || url.includes('b23.tv')) {
                    let videoId = '';
                    
                    // BV号格式
                    if (url.includes('/video/BV')) {
                        videoId = url.split('/video/')[1].split(/[?&#]/)[0];
                    } 
                    // 短链接格式
                    else if (url.includes('b23.tv')) {
                        // 实际应用中需要解析短链接，这里简化处理
                        videoId = 'BV' + Math.random().toString(36).substring(2, 12);
                    }
                    
                    if (videoId) {
                        return {
                            url: `https://www.bilibili.com/video/${videoId}`,
                            coverUrl: `https://i0.hdslb.com/bfs/archive/${videoId}.jpg`,
                            embedCode: `<iframe src="https://player.bilibili.com/player.html?bvid=${videoId}" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>`,
                            embedUrl: `https://player.bilibili.com/player.html?bvid=${videoId}`
                        };
                    }
                }
                
                // 西瓜视频
                if (url.includes('ixigua.com') || url.includes('ixiguavideo.com')) {
                    const videoIdMatch = url.match(/\/\d{19}/);
                    if (videoIdMatch) {
                        const videoId = videoIdMatch[0].replace('/', '');
                        return {
                            url: `https://www.ixigua.com/${videoId}`,
                            coverUrl: `https://p3-sign.toutiaoimg.com/tos-cn-p-0000/${videoId}~noop.image`,
                            embedCode: `<iframe src="https://www.ixigua.com/iframe/${videoId}" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>`,
                            embedUrl: `https://www.ixigua.com/iframe/${videoId}`
                        };
                    }
                }
                
                // YouTube
                if (url.includes('youtube.com') || url.includes('youtu.be')) {
                    let videoId = '';
                    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
                    const match = url.match(regExp);
                    
                    if (match && match[2].length === 11) {
                        videoId = match[2];
                    } else if (url.includes('youtu.be/')) {
                        videoId = url.split('youtu.be/')[1].split(/[?&#]/)[0];
                    }
                    
                    if (videoId) {
                        return {
                            url: `https://www.youtube.com/watch?v=${videoId}`,
                            coverUrl: `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
                            embedCode: `<iframe width="100%" height="100%" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`,
                            embedUrl: `https://www.youtube.com/embed/${videoId}`
                        };
                    }
                }
                
                // Vimeo
                if (url.includes('vimeo.com')) {
                    const regExp = /https?:\/\/(?:www\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|)(\d+)(?:$|\/|\?)/;
                    const match = url.match(regExp);
                    
                    if (match && match[3]) {
                        const videoId = match[3];
                        return {
                            url: `https://vimeo.com/${videoId}`,
                            coverUrl: null, // Vimeo封面需要通过API获取
                            embedCode: `<iframe src="https://player.vimeo.com/video/${videoId}" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`,
                            embedUrl: `https://player.vimeo.com/video/${videoId}`
                        };
                    }
                }
                
                return null;
            }
            
            function showLoading() {
                loadingDiv.style.display = 'block';
                resultDiv.style.display = 'none';
                errorMessage.style.display = 'none';
            }
            
            function hideLoading() {
                loadingDiv.style.display = 'none';
            }
            
            function showError(message) {
                errorMessage.textContent = message;
                errorMessage.style.display = 'block';
                successMessage.style.display = 'none';
            }
            
            function showSuccess(message) {
                successMessage.textContent = message;
                successMessage.style.display = 'block';
                errorMessage.style.display = 'none';
                
                // 3秒后自动消失
                setTimeout(() => {
                    successMessage.style.display = 'none';
                }, 3000);
            }
            
            function hideMessages() {
                errorMessage.style.display = 'none';
                successMessage.style.display = 'none';
            }
        });
    </script>
</body>
</html>